<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿哔哩哔哩弹幕播放器</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .Dplayer_box{
            overflow:hidden;
            width:980px;
            height:456px;
            margin:100px auto;
            display:block;
            border-top:1px solid #e5e9ef;
            border-bottom:1px solid #e5e9ef;
            background-color:#f6f9fa
        }
        #player1{
            background-size:100% 100%;
            margin-top:30px
        }
        .player_av{
            width:680px;
            height:100%;
            float:left;
            background:#000
        }
        .Dplayer_danmu{
            width:299px;
            float:right;
            height:100%
        }
        .Dplayer_watching{
            width:100%;
            height:60px;
            line-height:60px;
            display:inline-block;
            font-size:12px;
            color:#99a2aa;
            box-shadow:#ddd 0 0 5px
        }
        .Dplayer-watching-number{
            margin-left:20px;
            font-size:18px;
            font-weight:700;
            color:#222;
            padding:0
        }
        .Dplayer_list{
            width:100%;
            height:30px;
            overflow:hidden
        }
        .Dplayer_list li{
            width:60px;
            height:30px;
            float:left;
            color:#99a2aa;
            font-size:12px;
            text-align:center;
            line-height:30px
        }
        .Dplayer_list li:nth-child(1){
            width:58px!important
        }
        .Dplayer_list li:nth-child(2){
            width:136px!important
        }
        .list_ovefiow{
            width:100%;
            height:363px;
            overflow:auto
        }
        .danmuku_list{
            width:100%;
            height:20px;
            line-height:20px;
            text-align:left;
            color:#99a2aa;
            font-size:12px;
            display:block;
            margin:auto;
            overflow:auto;
            margin-top:5px
        }
        .danmuku_list li{
            float:left;
            width:60px;
            height:20px;
            white-space:nowrap;
            cursor:pointer
        }
        .danmuku_list li:nth-child(1){
            width:58px;
            margin-left:8px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
        }
        .danmuku_list li:nth-child(2){
            width:125px;
            margin-right:15px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
        }
        .danmuku_list li:nth-child(2):hover{
            color:#00a1d6
        }
        .danmuku_list li:nth-child(3){
            margin-left:5px
        }
    </style>
    <link rel="stylesheet" href="css/DPlayer.min.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div class="Dplayer_box">
    <div class="player_av">
        <div id="player1"></div>
    </div>

    <!--<div class="Dplayer_danmu">-->
        <!--<div class="Dplayer_watching">-->
            <!--<span class="Dplayer-watching-number" title="这个数据是假的">24</span>-->
            <!--人正在观看,<span class="danmuku_num">100</span>条弹幕-->
        <!--</div>-->

        <!--<ul class="Dplayer_list">-->
            <!--<li>时间</li>-->
            <!--<li>发送内容</li>-->
            <!--<li>用户类型</li>-->
        <!--</ul>-->
        <!--<ul class="list_ovefiow">-->

        <!--</ul>-->

    <!--</div>-->
</div>

<div class="alert_back">加载中</div>
<script src="js/DPlayer.min.js"></script>
<script>
//    console.log(" %c 该项目基于Dplayer.js",'color:red')
    var dp = new DPlayer({
        element: document.getElementById('player1'),
        video: {
            url: 'xiaoli.mp4',
            pic: 'css/danmu.jpg'
        },
        danmaku: {
            id: 'demo',
            api: 'https://api.prprpr.me/dplayer/',
            addition: ['https://api.prprpr.me/dplayer/bilibili?aid=15572523']
        }
    });
    // 弹出框
    function alert_back(text) {
        $(".alert_back").html(text).show();
        setTimeout(function () {
            $(".alert_back").fadeOut();
        },1200)
    }
    //秒转分秒
    function formatTime(seconds) {
        return [
//            parseInt(seconds / 60 / 60),
            parseInt(seconds / 60 % 60),
            parseInt(seconds % 60)
        ]
            .join(":")
            .replace(/\b(\d)\b/g, "0$1");
    }
$.ajax({
    url:"https://api.prprpr.me/dplayer/bilibili?aid=15572523",
    success:function (data) {
        if(data.code=="1"){
            var danmaku=data.danmaku;
            var autor="农民";
            $(".danmuku_num").text(danmaku.length)
            $(danmaku).each(function (index,item) {
                if(item.type=="right"){
                }else
                {
                    autor="地主"
                }
                var oLi=`   <ol class="danmuku_list" time="${item.time}">
            <li>${formatTime(item.time)}</li>
            <li title="${item.text}">${item.text}</li>
            <li>${autor}</li>
</ol>
`
                $(".list_ovefiow").append(oLi);
                autor="农民";
            })
        }else {
            alert_back("弹幕加载失败 -v-!");
        }
        $(".danmuku_list").on("click",function () {

            dp.seek( $(this).attr("time"))
        })
    }
})
</script>
</body>
</html>